<template>
  <el-tabs type="border-card" class="content-tabs">
    <el-tab-pane label="订单查看">
      <el-card class="content-card">
        <template #header>
          <div class="card-header">
            <span>订单查看</span>
          </div>
        </template>

        <div class="content-box">
          <el-table
            :data="reserveList"
            style="width: 100%; margin-top: 20px"
            stripe
            row-key="reserveId"
          >
            <el-table-column
              type="index"
              width="80"
            />
            <el-table-column
              prop="roomName"
              label="房间名"
              show-overflow-tooltip
            />
            <!-- <el-table-column
              prop="userAccount"
              label="用户名"
              show-overflow-tooltip
            />             -->
            <el-table-column
              prop="reserveStart"
              label="开始时间"
              width="160"
            />
            <el-table-column
              prop="reserveEnd"
              label="结束时间"
              width="160"
            />
            <el-table-column
              prop="reserveCost"
              label="花费/元"
              width="160"
              show-overflow-tooltip
            />
            <el-table-column
              prop="reserveOrdertime"
              label="订单时间"
              width="160"
            />
            <el-table-column
              prop="reserveDeadline"
              label="截至时间"
              width="160"
            />
            <el-table-column
              prop="reserveStatus"
              label="状态"
              width="80"
            />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button
                  type="warning"
                  size="small"
                  v-if="scope.row.reserveStatus==='待支付'"
                  @click="Pay(scope.row)"
                >
                  支付
                </el-button>
                <!--这里的功能可以添加"取消订单",点击这个会修改订单状态'已取消'，释放房间为空闲/预定-->
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :total="total"
            current-page="currentPage"
            :page-size="10"
            :pager-count="8"
            layout="total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            class="pagination-container"
          />
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
  import { ElMessage,ElMessageBox } from 'element-plus'
  import { ref,reactive, onMounted } from 'vue'
  import {
    GetReserveListServer,
    PayServer,
  } from '@/api/instance'

  onMounted(()=>{
    fetchReserveList();
  })
  const reserveList=reactive([
  ])
  const formatBoolean = (row, column, cellValue) =>{
    var ret = ''  //你想在页面展示的值
    if (cellValue) {
        ret = "支持"  //根据自己的需求设定
    } else {
        ret = "不支持"
    }
    return ret
  }
  const currentPage = ref(1)
  const total=ref(0)
  const fetchReserveList=async (page=1) => {
    currentPage.value=page;
    try{
      const res = await GetReserveListServer({});
      if(res.code===0){
        const allData=res.data||[];
        total.value=allData.length;
        const start=(page-1)*10;
        const end=start+10;
        reserveList.splice(0,reserveList.length,...allData.slice(start,end));
      }else{
        ElMessage.error(res.message || '获取订单列表失败')  
      }
    }catch(error){
      ElMessage.error(error.message || '网络请求失败1')
    }
  }
  const Pay=async (row)=>{
    ElMessageBox.confirm('确定支付该订单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success',
    }).then(async () => {
      try{
        const res=await PayServer({
          reserveId:row.reserveId
        });
        if(res.code===0){
          ElMessage.success('支付成功')
          fetchReserveList(currentPage.value);
        }else{
          ElMessage.error(res.message || '支付失败')  
        }
      }catch(error){
        ElMessage.error(error.message || '网络请求失败2')
      }
    })
  }
  // 处理每页显示条目数变化
  const handleSizeChange = (pageSize) => {
    // 可以在这里添加逻辑来处理每页显示条目数的变化
      console.log(`每页显示条目数变为: ${pageSize}`);
  };
  // 处理已创建社团分页变化
  const handlePageChange = (newPage) => {
    fetchReserveList(newPage);
  };
</script>

<style lang="scss" scoped>
  .content-tabs{
    height: 95%;
    width: 95%;
    margin: 15px auto;//原来为20px，现在为15px
    .content-card{
      height: 95%;
      margin: 20px;
      .card-header{
        font-size: 18px;
        font-weight: bold;
      }
      .search-form{
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
        :deep(.el-select){
          width: 200px;
          margin-right: 20px;
        }
        :deep(.el-input){
          width: 200px;
          margin-right: 20px;
        }
        :deep(.el-checkbox){
          margin-right: 20px;
          .el-checkbox__label{
            font-size: 16px;
          }
        }
      }
      .content-box{
        .pagination-container{
          display: flex;
          justify-content: center;
          margin-top: 30px
        }
      }
    }
  }
  .el-tab-pane {
    height:100%;
  }
  .el-form {
    padding: 5px;
  }
  .el-form-item {
    margin-bottom: 25px; /* 原默认值为 25px，可调大数值 */
    margin-right: 35%;
  }
</style>